<template>
    <view class="content">
		<header>
			<image src="../../static/img/earth.png"></image>
			<div class="search"> 
				<form @submit="lj_search">
					<p>
						<input class="search-input" placeholder="输入您要搜索的垃圾"/>
					</p>
					<button class="search-btn" form-type="submit">搜索</button>
				</form>
			</div>
		</header>
		
		<uni-list class="result">
			<view class="uni-padding-wrap uni-common-mt">
				<view class="uni-title uni-common-mt">
					<text>搜索结果</text>
				</view>
				<view v-for="item in rbItems" :key="item.id" >
					<uni-list-item :title="item.desc" thumb="http://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png" 
						show-arrow="false"></uni-list-item>
				</view>
			</view>
		</uni-list>
    </view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
    export default {
		components: {uniList,uniListItem},
		data:{
			rbItems: [
				{
					id: 1,
					desc: "垃圾1",
					type: "干垃圾"
				},{
					id: 2,
					desc: "垃圾2",
					type: "有害垃圾"
				},{
					id: 2,
					desc: "垃圾2",
					type: "有害垃圾"
				},{
					id: 2,
					desc: "垃圾2",
					type: "有害垃圾"
				},{
					id: 2,
					desc: "垃圾2",
					type: "有害垃圾"
				},{
					id: 2,
					desc: "垃圾2",
					type: "有害垃圾"
				},{
					id: 2,
					desc: "垃圾2",
					type: "有害垃圾"
				},{
					id: 2,
					desc: "垃圾2",
					type: "有害垃圾"
				},{
					id: 2,
					desc: "垃圾2",
					type: "有害垃圾"
				},{
					id: 2,
					desc: "垃圾2",
					type: "有害垃圾"
				},{
					id: 2,
					desc: "垃圾2",
					type: "有害垃圾"
				},{
					id: 2,
					desc: "垃圾2",
					type: "有害垃圾"
				},{
					id: 2,
					desc: "垃圾2",
					type: "有害垃圾"
				}
			]
		},
		methods:{
			lj_search(){
				console.log("lj_search...")
			}
		}
    }
</script>

<style>
    *{
    	margin: 0;
    	padding: 0;
    	font-family: "微软雅黑";
    }
    header{
    	/* 头部包含背景图 */
    	width: 100%;
    	overflow: hidden;
    	text-align: center;
    	height: 180px;
    }
	header>image{
		width: 25%;
		height: 90px;
	}
	p{
		font-family: "sans-serif";
		font-size: 15px;
	}
	text{
		font-family: "sans-serif";
		font-size: 15px;
		padding-left: 15px;
	}
	
	.search{
		margin: 20upx auto;
		text-align: center;
		width: 180px;
	}
	.search-input{
		border-style: solid;
		border-color: #C8C7CC;
	}
	.search-btn{
		background: #2E8B57;
		width: 80px;
		height: 33px;
		font-size: 15px;
	}
	
	.result{
	}
</style>
